doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content)
        meta(name='author', content)

        title Modern Business - Start Bootstrap Template

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        include includes/css.pug

    body.d-flex.flex-column

        main.flex-shrink-0

            // Navigation
            include includes/navbar.pug

            // Page content
            section.py-5

                .container.px-5

                    // Contact form
                    .bg-light.rounded-3.py-5.px-4.px-md-5.mb-5
                        .text-center.mb-5
                            .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                i.bi.bi-envelope
                            h1.fw-bolder Get in touch
                            p.lead.fw-normal.text-muted.mb-0 We'd love to hear from you
                        .row.gx-5.justify-content-center
                            .col-lg-8.col-xl-6

                                // * * * * * * * * * * * * * * *
                                // * * SB Forms Contact Form * *
                                // * * * * * * * * * * * * * * *

                                // This form is pre-integrated with SB Forms.
                                // To make this form functional, sign up at
                                // https://startbootstrap.com/solution/contact-forms
                                // to get an API token!

                                form#contactForm(data-sb-form-api-token='API_TOKEN')

                                    // Name input
                                    .form-floating.mb-3
                                        input#name.form-control(
                                            type='text',
                                            placeholder='Enter your name...'
                                            data-sb-validations='required'
                                        )
                                        label(for='name') Full name
                                        .invalid-feedback(data-sb-feedback='name:required')
                                            | A name is required.
                                    
                                    // Email address input
                                    .form-floating.mb-3
                                        input#email.form-control(
                                            type='email',
                                            placeholder='name@example.com'
                                            data-sb-validations='required,email'
                                        )
                                        label(for='email') Email address
                                        .invalid-feedback(data-sb-feedback='email:required')
                                            | An email is required.
                                        .invalid-feedback(data-sb-feedback='email:email')
                                            | Email is not valid.
                                    
                                    // Phone number input
                                    .form-floating.mb-3
                                        input#phone.form-control(
                                            type='tel',
                                            placeholder='(123) 456-7890'
                                            data-sb-validations='required'
                                        )
                                        label(for='phone') Phone number
                                        .invalid-feedback(data-sb-feedback='phone:required')
                                            | A phone number is required.
                                    
                                    // Message input
                                    .form-floating.mb-3
                                        textarea#message.form-control(
                                            type='text',
                                            placeholder='Enter your message here...',
                                            style='height: 10rem;'
                                            data-sb-validations='required'
                                        )
                                        label(for='message') Message
                                        .invalid-feedback(data-sb-feedback='message:required')
                                            | A message is required.

                                    // Submit success message
                                    //
                                    // This is what your users will see when the form
                                    // has successfully submitted
                                    #submitSuccessMessage.d-none
                                        .text-center.mb-3
                                            .fw-bolder Form submission successful!
                                            | To activate this form, sign up at
                                            br
                                            a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms

                                    // Submit error message
                                    //
                                    // This is what your users will see when there is
                                    // an error submitting the form
                                    #submitErrorMessage.d-none
                                        .text-center.text-danger.mb-3 Error sending message!

                                    // Submit Button
                                    .d-grid
                                        button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit

                    // Contact cards
                    .row.gx-5.row-cols-2.row-cols-lg-4.py-5
                        .col
                            .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                i.bi.bi-chat-dots
                            .h5.mb-2 Chat with us
                            p.text-muted.mb-0 Chat live with one of our support specialists.
                        .col
                            .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                i.bi.bi-people
                            .h5 Ask the community
                            p.text-muted.mb-0 Explore our community forums and communicate with other users.
                        .col
                            .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                i.bi.bi-question-circle
                            .h5 Support center
                            p.text-muted.mb-0 Browse FAQ's and support articles to find solutions.
                        .col
                            .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                i.bi.bi-telephone
                            .h5 Call us
                            p.text-muted.mb-0 Call us during normal business hours at (555) 892-9403.

        // Footer
        include includes/footer.pug

        include includes/scripts.pug

        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * *                               SB Forms JS                               * *
        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')